/*
 * @description: 描述内容
 */
import { Dayjs } from "dayjs";
import { CalendarProps } from ".";
import LocaleContext from "./LocaleContext";
import { useContext } from "react";
import allLocales from "./locale";
import cs from "classnames";
interface MonthCalendarProps extends CalendarProps {
  selectHandler?: (date: Dayjs) => void
  curMonth:Dayjs
}

//基于传递的日期生成需要展示的对应需要展示的日期的数据
function getALLDays(date: Dayjs) {
  // const daysInMonth = date.daysInMonth(); //获取这个月有多少天
  const startDate = date.startOf("month"); //获取这个月的第一天
  const day = startDate.day(); //获取这个月的第一天是星期几(day是从0开始的，也就是o是星期一)
  const daysInfo: Array<{ date: Dayjs; currentMonth: boolean }> = new Array(
    6 * 7
  );

  //基于第一天星期几决定赋值其前面几个天数（day是从0开始的，也就是o是星期一）
  for (let i = 0; i < day; i++) {
    daysInfo[i] = {
      date: startDate.subtract(day - i, "day"),
      currentMonth: false, //一定不是这个月的
    };
  }
  /**
   * i - day    3-3  4-3  5-3  这样
   */
  for (let i = day; i < daysInfo.length; i++) {
    const calcMonth = startDate.add(i - day, "day");
    daysInfo[i] = {
      date: calcMonth,
      currentMonth: date.month() === calcMonth.month(), //区分这里面的当个月还是下个月的
    };
  }
  return daysInfo;
}

function renderCell(
  item: { date: Dayjs; currentMonth: boolean },
  dateRender: MonthCalendarProps["dateRender"],
  dateInnerContent: MonthCalendarProps["dateInnerContent"],
  value: Dayjs,
) {
  if (dateRender) {
    return dateRender(item.date);
  } else {
    return (
      <div className="calendar-month-body-cell-date">
        <div
          className={cs(
            "calendar-month-body-cell-date-value",
            value.format("YYYY-MM-DD") === item.date.format("YYYY-MM-DD")
              ? "calendar-month-body-cell-date-selected"
              : ""
          )}
        >
          {item.date.date()}
        </div>
        <div className="calendar-month-body-cell-date-content">
          {dateInnerContent?.(item.date)}
        </div>
      </div>
    );
  }
}

//添加row的名称和其他
function renderDays(
  days: Array<{ date: Dayjs; currentMonth: boolean }>,
  dateRender: MonthCalendarProps["dateRender"],
  dateInnerContent: MonthCalendarProps["dateInnerContent"],
  value: Dayjs,
  selectHandler:MonthCalendarProps['selectHandler']
) {
  const rows = [];
  for (let i = 0; i < 6; i++) {
    const row = [];
    for (let j = 0; j < 7; j++) {
      //遍历days的下标
      const item = days[i * 7 + j];
      row[j] = (
        <div
        onClick={() => selectHandler?.(item.date)}
          className={
            "calendar-month-body-cell " +
            (item.currentMonth ? "calendar-month-body-cell-current" : "")
          }
        >
          {renderCell(item, dateRender, dateInnerContent, value)}
        </div>
      );
    }
    rows.push(row);
  }
  return rows.map((row) => (
    <div className="calendar-month-body-row">{row}</div>
  ));
}

function MonthCalendar(props: MonthCalendarProps) {
  const localeContext = useContext(LocaleContext);
  const { value, dateRender, dateInnerContent,selectHandler,curMonth } = props;
  const CalendarLocale = allLocales[localeContext.locale];
  const weekList = [
    "sunday",
    "monday",
    "tuesday",
    "wednesday",
    "thursday",
    "friday",
    "saturday",
  ];
  const allDays = getALLDays(curMonth);
  return (
    <div className="calendar-month">
      <div className="calendar-month-week-list">
        {weekList.map((week) => {
          return (
            <div className="calendar-month-week-list-item" key={week}>
              {CalendarLocale.week[week]}
            </div>
          );
        })}
      </div>
      <div className="calendar-month-body">
        {renderDays(allDays, dateRender, dateInnerContent, value,selectHandler)}
      </div>
    </div>
  );
}

export default MonthCalendar;
